<script setup>
import router from "@/router";
import {onMounted, reactive, ref} from "vue";
import PageComponent from "@/components/index/PageComponent.vue";
import {$ajax, apiUrl} from "@/utils/ajax";
const data = reactive([])
const loading = ref(false)
const pageSize = ref(30)
const page = ref(1)
const total = ref(0)
const handlData = p=>{
  page.value = p
  loading.value = true
  $ajax.get(`${apiUrl}admin/supplier/page`, {
    params: {
      page: page.value,
      pageSize: pageSize.value
    }
  }).then(({data: {result: {lst, total: tol}}}) => {
    data.splice(0, data.length, ...lst)
    total.value = tol
    loading.value = false
  }).catch(() => loading.value = false)
}
onMounted(()=>{
  handlData(1)
})
</script>

<template>
  <div class="breadcrumb">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>代理商</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="search">
    <el-button type="primary" @click="router.push({name:'supplierEdit'})">新增</el-button>
  </div>
  <el-table :data="data" v-loading="loading" height="75vh" border stripe size="small" class="table-data">
    <el-table-column label="名称" prop="name"/>
    <el-table-column label="手机号" prop="mobile"/>
    <el-table-column label="礼包数量" prop="product_count"/>
    <el-table-column label="渠道码" prop="code"/>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-button-group size="small">
          <el-button type="primary" link @click="router.push({name:'supplierEdit', params:{id:row.id}})">编辑</el-button>
          <el-button type="primary" link @click="router.push({name:'supplierCode', params:{id:row.id}})">礼包码</el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>
  <page-component :size="pageSize" :page="page" :total="total" @get-data="handlData"/>
</template>

<style scoped lang="scss">

</style>
